{% extends 'layout/base.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'app01/css/account.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-select/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/select2/css/select2.min.css' %}">
    <style>

        label {
            font-size: 15px;
        }

        .form-group > span {
            color: red;
        }

        a {
            text-decoration: none;
            color: blue;
        }

        .form-control {
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 10px;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .text-type {
            overflow-wrap: break-word;

        }

    </style>
{% endblock %}

<!--面包屑导航-->
{% block breadcrumb %}
    <ol class="breadcrumb float-sm-left">
        <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
        <li class="breadcrumb-item active"><a href="{% url 'index' %}">{{ it_obj.it_name }}</a></li>
        <li class="breadcrumb-item active">用例列表</li>
    </ol>
{% endblock %}


{% block content %}
    {% if api_obj %}
        <!--如果项目表有数据就展示-->
        <div>
            {% csrf_token %}
            <a class="btn btn-success btn-sm"
               id="BatchExecution"><i class="fa fa-forward" aria-hidden="true"></i>&nbsp;批量执行</a>
            <a class="btn btn-primary btn-sm"
               data-bs-toggle="modal"
               data-bs-target="#staticBackdrop"
               data-whatever="新建用例">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;添加用例</a><br/><br/>
            <div class="">
                <input class="form-check-input" type="checkbox" value="" id="selectAll" style="height: 18px;width: 18px">
                <label class="form-check-label" for="flexCheckDefault">
                    全选/取消
                </label>
            </div>
        </div>
        <br/>

        <table class="table table-bordered">
            <thead class="table-light">
            <tr>
                <th>选择</th>
                <th>用例名称/用例标题</th>
                <th>请求类型/url</th>
                <th>请求参数params/data/json/cookies</th>
                <th>预期值</th>
                <th>用例报告</th>
                <th>通过状态/是否执行</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for foo in api_obj %}
                <tr>
                    <td>
                        <input type="checkbox" value="{{ foo.pk }}" name="checkbox_list" style="height:18px;width: 18px"/>
                    </td>
                    <td>
                        {{ foo.api_name }}<br/>
                        <a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="用例标题详细信息"
                           data-details="{{ foo.api_title }}"
                        >{{ foo.api_title }}</a>
                    </td>
                    <td>
                        {{ foo.get_api_method_display }}<br/>
                        <a href="#"
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="url详细信息"
                           data-details="{{ foo.api_url }}"
                           title="{{ foo.api_url }}">{{ foo.api_url|truncatechars:20 }}...</a>
                    </td>
                    <td><a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="请求参数params详细信息"
                           data-details="{{ foo.api_params }}"
                    >{% if foo.api_params %}{{ foo.api_params }}{% else %}{}{% endif %}</a><br/>
                        <a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="请求参数data详细信息"
                           data-details="{{ foo.api_data }}"
                        >{% if foo.api_data %}{{ foo.api_data | truncatechars:55 }}...{% else %}{}{% endif %}</a><br/>
                        <a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="请求参数json详细信息"
                           data-details="{{ foo.api_json }}"
                        >{% if foo.api_json %}{{ foo.api_json }}{% else %}{}{% endif %}</a><br/>
                        <a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="请求参数cookies详细信息"
                           data-details="{{ foo.api_cookies }}"
                        >{% if foo.api_cookies %}{{ foo.api_cookies }}{% else %}{}{% endif %}</a>
                    </td>

                    <td><a href=""
                           data-bs-toggle="modal"
                           data-bs-target="#show_details"
                           data-bs-placement="top"
                           data-whatever="预期结果详细信息"
                           data-details="{{ foo.api_expect }}"
                    >{% if foo.api_expect %}{{ foo.api_expect|truncatechars:25 }}...{% else %}{}{% endif %}</a></td>
                    {% if foo.api_report %}
                        <td><a href="{% url 'download_case_report' foo.pk %}">下载</a></td>
                    {% else %}
                        <td>无</td>
                    {% endif %}
                    <td>{{ foo.get_api_pass_status_display }}<br/>
                        {{ foo.get_api_run_status_display }}
                    </td>
                    <td>
                        <a class="btn btn-success btn-sm"
                           data-bs-toggle="modal"
                           data-bs-target="#myModal"
                           data-whatever="详细信息"
                           data-desc="{{ foo.api_desc }}"
                           data-details="{{ foo.api_title }}"
                           data-url="{{ foo.api_url }}"
                           data-method="{{ foo.get_api_method_display }}"
                           data-params="{{ foo.api_params }}"
                           data-data="{{ foo.api_data }}"
                           data-json="{{ foo.api_json }}"
                           data-cookies="{{ foo.api_cookies }}"
                           data-headers="{{ foo.api_headers }}"
                           data-expect="{{ foo.api_expect }}"
                        ><i class="fa fa-file-picture-o">&nbsp;</i>详情</a>
                        <a href="{% url 'run_case' foo.pk %}" class="btn btn-warning btn-sm"><i
                                class="fa fa-play-circle">&nbsp;</i>执行</a>
                        <a href="{% url 'edit_api' pk=foo.pk %}"
                           class="btn btn-info btn-sm"
                        ><i class="fa fa-gear">&nbsp;</i>编辑</a>
                        <a class="btn btn-danger btn-sm" data-bs-toggle="modal"
                           data-bs-target="#my_modal" data-pid="{{ foo.pk }}"><i class="fa fa-trash ">&nbsp;</i>删除</a>
                        <a class="btn btn-secondary btn-sm"
                           data-bs-toggle="modal"
                           data-bs-target="#myModal_order"
                           data-order="{{ foo.ascending_order }}"
                           data-aid="{{ foo.pk }}"
                        ><i class="fa fa-chevron-circle-up">&nbsp;</i>置顶 <span>({{ foo.ascending_order }})</span></a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

        {% if all_count >= 10 %}
            <nav>
                <ul class="pagination">
                    {{ page.page_html|safe }}
                </ul>
            </nav>
        {% endif %}

    {% else %}
        <span>暂无数据</span>
        <a class="btn btn-primary btn-sm"
           data-bs-toggle="modal"
           data-bs-target="#staticBackdrop"
           data-whatever="新建用例">
            <i class="fa fa-plus-circle" aria-hidden="true">&nbsp;</i>
            创建用例&nbsp;</a>
    {% endif %}

    <!--添加测试用例modal对话框-->
    <div class="modal fade" id="staticBackdrop">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addForm" class="form-horizontal">
                        {% csrf_token %}
                        <input type="hidden" name="it_id" value={{ it_obj.pk }}>
                        <input type="hidden" name="fid" id="fid">
                        <!--用例名称-->
                        <div class="form-group">
                            <span>*</span>
                            <label for="{{ form.api_name.id_for_label }}">{{ form.api_name.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_name }}
                                        <span class="error-msg"></span>
                                        <p style="color:#6c757d;margin:0px">英文下划线数字组合(必须唯一)，例如neeo_001等</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--用例标题-->
                        <div class="form-group">
                            <span>*</span>
                            <label for="{{ form.api_title.id_for_label }}">{{ form.api_title.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_title }}
                                        <span class="error-msg"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--请求url-->
                        <div class="form-group">
                            <span>*</span>
                            <label for="{{ form.api_url.id_for_label }}">{{ form.api_url.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text"
                                              id="basic-addon3">{{ it_obj.it_url }}</span>
                                        {{ form.api_url }}
                                        <span class="error-msg"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--请求类型-->
                        <div class="form-group">
                            <span>*</span>
                            <label for="{{ form.api_method.id_for_label }}"
                                   class="col-md-4 control-label">{{ form.api_method.label }}</label>
                            <div class="col-md-9">
                                <div>
                                    {{ form.api_method }}
                                    <span class="error-msg"></span>
                                </div>
                            </div>
                        </div>
                        <!--请求参数params-->
                        <div class="form-group">
                            <label for="{{ form.api_params.id_for_label }}">{{ form.api_params.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_params }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--请求参数data-->
                        <div class="form-group">
                            <label for="{{ form.api_data.id_for_label }}">{{ form.api_data.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_data }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--请求参数api_json-->
                        <div class="form-group">
                            <label for="{{ form.api_json.id_for_label }}">{{ form.api_json.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_json }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--请求依赖header-->
                        <div class="form-group">
                            <label for="{{ form.api_headers.id_for_label }}">{{ form.api_headers.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_headers }}
                                        <span style="color:#6c757d;">需要依赖前面请求header值,填入格式如：{"testfan-token":"${neeo_001>api_temporary_response_json>data}$"}</span>
                                        <span style="color:#6c757d;">   解释：本次接口用例请求头(header)中testfan-token字段的值从用例名neeo_001响应信息response_json的data字段值获取</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--请求依赖cookies-->
                        <div class="form-group">
                            <label for="{{ form.api_cookies.id_for_label }}">{{ form.api_cookies.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_cookies }}
                                        <span style="color:#6c757d;">需要依赖前面请求返回cookies值,填入依赖用例名，例如：neeo_001</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--预期结果-->
                        <div class="form-group">
                            <label for="{{ form.api_expect.id_for_label }}">{{ form.api_expect.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_expect }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--用例描述-->
                        <div class="form-group">
                            <label for="{{ form.api_desc.id_for_label }}">{{ form.api_desc.label }}</label>
                            <div class="col-md-11">
                                <div>
                                    <div>
                                        {{ form.api_desc }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="bindSubmit">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--详情modal对话框-->
    <div class="modal" id="myModal">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">详细信息</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <label>用例标题：&nbsp;&nbsp;</label><span class="test-title"></span>
                    <br>
                    <label>用例描述：&nbsp;&nbsp;</label><span class="test-desc"></span>
                    <br>
                    <label>请求url：&nbsp;&nbsp;</label><span class="test-url"></span>
                    <br>
                    <label>请求类型：&nbsp;&nbsp;</label><span class="test-type"></span>
                    <br>
                    <label>参数(params)：&nbsp;&nbsp;</label><span class="test-params"></span>
                    <br>
                    <label>参数(data)：&nbsp;&nbsp;</label><span class="test-data"></span>
                    <br>
                    <label>参数(json)：&nbsp;&nbsp;</label><span class="test-json"></span>
                    <br>
                    <label>请求cookies：&nbsp;&nbsp;</label><span class="test-cookies"></span>
                    <br>
                    <label>请求headers：&nbsp;&nbsp;</label><span class="test-headers"></span>
                    <br>
                    <label>预期结果：&nbsp;&nbsp;</label><span class="test-expected"></span>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>

    <!--显示完整字段对话框-->
    <!-- 模态框 -->
    <div class="modal fade" id="show_details" style="margin-top: 30px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h6 class="modal-title"></h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div class="text-type">
                        <span class="url-details"><text class="url-details" style="word-wrap:break-word;"></text></span>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>

    <!-- 批量执行未选择任何选项时modal对话框-->
    <div aria-live="polite" aria-atomic="true" style="position: fixed;top:65px;left:450px;">
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header" style="background-color: #e70d0dd9;color: #1b1c1c;">
                <strong class="me-auto"><span>提示</span></strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                <h6>请选择用例</h6>
            </div>
        </div>
    </div>

    <!--删除Modal-->
    <div class="modal fade" id="my_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">提示</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="delete_api_id">
                        {% csrf_token %}
                        <input type="hidden" name="fid" id="fid">
                    </form>
                    <p>你确定删除吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btnSubmit">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--添加排序码-->
    <!-- 模态框 -->
    <div class="modal fade" id="myModal_order">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h6 class="modal-title">置顶</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <form id="id_order">
                        {% csrf_token %}
                        <div class="form-group">
                            <span>*</span>
                            <label for="id_order">排序码</label>
                            <input type="hidden" name="aid" id="aid">
                            <input type="text" name="name_order" class="form-control" id="id_order">
                        </div>
                        <span class="error-msg" id="id_error_msg"></span><br/>
                        <span style="color: #73879C;">排序码范围 1 - 100，数值最大排在最前</span>
                    </form>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="bind_save">确定</button>
                </div>

            </div>
        </div>
    </div>


{% endblock %}
{% block js %}
    <script src="{% static 'plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
    <script src="{% static 'plugin/select2/js/select2.min.js' %}"></script>
    <script src="{% static 'plugin/select2/js/i18n/zh-CN.js' %}"></script>
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        $(function () {
            initAddModal();
            bindClickDelete();
            bindClickSubmit();
            bindClickCheckbox();
            bindClickOrder();
            checkboxChecked();

        });

        // 批量执行逻辑
        /*
        1、点击执行按钮，获取所有选中的checkbox的值
           判断点击后，没有找到选中的checkBox,要给提示信息
        2、将多个值发送到后端
        3、后端处理完毕，返回前端状态
         */
        function bindClickCheckbox() {
            $("#BatchExecution").click(function () {
                var chk_value = Array();
                $.each($('input[name="checkbox_list"]:checked'), function (index, item) { //遍历将所有选中的值放到数组中
                    chk_value.push($(this).val());
                });

                if (chk_value.length == 0) {
                    document.querySelectorAll('.toast').forEach(function (a) {
                        var b = new bootstrap.Toast(a, {
                            autohide: !1
                        });
                        b.show()
                    })

                } else {
                    // ajax将数组发送到后端
                    // 前段序列化与反序列化
                    $.ajax({
                        "url": "{% url 'run_case' 0 %}",
                        "type": "POST",
                        "data": {
                            "chk_value": JSON.stringify(chk_value),
                            "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()
                        },
                        success: function (data) {
                            window.location = data['path']
                        }
                    })
                }
            });
        }

        /*
        全选/取消全选
        */
        function checkboxChecked() {
            $("#selectAll").click(function () {
                if (this.checked == true) {
                    $("input[name=\"checkbox_list\"]").each(function () {
                        this.checked = true;
                    })
                } else {
                    $("input[name=\"checkbox_list\"]").each(function () {
                        this.checked = false;
                    })
                }
            })
        }

        /*
        删除二次确认
         */
        function bindClickDelete() {
            $("#btnSubmit").click(function () {
                var pk_id = $("#pk_value").attr("value");
                $.ajax({
                    url: "{% url 'delete_api' %}",
                    data: $("#delete_api_id").serialize(),
                    type: "POST",
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.href = location.href;
                        } else {
                            alert("删除失败")
                        }
                    }
                })
            })

        }

        /*
        点击打开modal对话框时初始化添加&编辑模态对话框
         */
        function initAddModal() {
            /* 添加测试用例modal*/
            $('#staticBackdrop').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var recipient = button.data('whatever'); // Extract info from data-* attributes
                var modal = $(this);
                modal.find('.modal-title').text(recipient);
                modal.find(".error-msg").empty();
                $("#addForm")[0].reset();
            });
            /* 删除 */
            $('#my_modal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var pid = button.data("pid");
                var modal = $(this);
                modal.find("#fid").val(pid);
            });
            /* 详情 */
            $("#myModal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var desc = button.data("desc");
                var details = button.data("details");
                var url = button.data("url");
                var method_type = button.data("method");
                var params = button.data("params");
                var data_args = button.data("data");
                var json_args = button.data("json");
                var data_cookies = button.data("cookies");
                var data_headers = button.data("headers");
                var data_expected = button.data("expect");
                if (params == "None") {
                    params = "无"
                } else if (Object.values(params).length > 0) {
                    params = JSON.stringify(params);
                } else {
                    params = "无"
                }
                if (data_args == "None") {
                    data_args = "无"
                } else if (Object.values(data_args).length > 0) {
                    data_args = JSON.stringify(data_args);
                } else {
                    data_args = "无"
                }

                if (json_args == "None") {
                    json_args = "无"
                } else if (Object.values(json_args).length > 0) {
                    json_args = JSON.stringify(json_args)
                } else {
                    json_args = "无"
                }

                if (data_cookies == "None") {
                    data_cookies = "无";
                } else if (Object.values(data_cookies).length > 0) {
                    data_cookies = JSON.stringify(data_cookies)
                } else {
                    data_cookies = "无"
                }

                if (data_headers == "None") {
                    data_headers = "无";
                } else if (Object.values(data_headers).length > 0) {
                    data_headers = JSON.stringify(data_headers)
                } else {
                    data_headers = "无"
                }

                if (data_expected == "None") {
                    data_expected = "无";
                } else if (Object.values(data_expected).length > 0) {
                    data_expected = JSON.stringify(data_expected)
                } else {
                    data_expected = "无"
                }

                if (desc == "None") {
                    desc = "无";
                } else if (Object.values(desc).length > 0) {
                } else {
                    desc = "无"
                }

                var modal = $(this);
                modal.find(".test-title").text(details);
                modal.find(".test-desc").text(desc);
                modal.find(".test-url").text(url);
                modal.find(".test-type").text(method_type);
                modal.find(".test-params").text(params);
                modal.find(".test-data").text(data_args);
                modal.find(".test-json").text(json_args);
                modal.find(".test-cookies").text(data_cookies);
                modal.find(".test-headers").text(data_headers);
                modal.find(".test-expected").text(data_expected);
            });
            /*字段过长时显示详情modal*/
            $("#show_details").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var details = button.data("details");
                var recipient = button.data('whatever');
                var modal = $(this);
                if (details == "None") {
                    details = {}
                }
                modal.find(".url-details").text((JSON.stringify(details)));
                modal.find(".modal-title").text(recipient);
            });
            /* 排序 */
            $("#myModal_order").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var order = button.data("order");
                var aid = button.data("aid");
                var modal = $(this);
                modal.find(".error-msg").empty();
                modal.find('input[type=text]').val(order);
                modal.find("#aid").val(aid)
            })
        }

        /*
        添加测试用例
         */
        function bindClickSubmit() {
            $("#bindSubmit").click(function () {
                $.ajax({
                    url: location.href,
                    data: $("#addForm").serialize(),
                    dataType: "JSON",
                    type: "POST",
                    success: function (res) {
                        if (res.status) {
                            location.href = res.data
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0])
                            })
                        }
                    }
                })
            })

        }

        /*
        设置排序码
         */
        function bindClickOrder() {
            $("#bind_save").click(function () {
                $.ajax({
                    url: {% url "order_by" %},
                    data: $("#id_order").serialize(),
                    type: "POST",
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.href = location.href;
                        } else {
                            $("#id_error_msg").text(res.error)
                        }
                    }
                })
            });

        }
    </script>
{% endblock %}

